<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      canvas{
          border:1px solid red;
      }

    </style>
  </head>
  <body>
    <!-- canvas 默认 宽高 300 * 150  在canvas 里面写内容 没有意义 写字元素 也没有意义  宽高设置 写在标签上 不要写在style 里面 不然js 里面的绘图坐标全部会错  -->
     <canvas width="800" height="420"></canvas>
     <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');  // 获取画布的笔
        ctx.fillText('数据可视化',50,20);
        ctx.font = '16px 微软雅黑'
        ctx.moveTo(100,100);
        ctx.lineTo(100,400);
        ctx.lineTo(700,400);
        
        ctx.moveTo(100,100)
        ctx.lineTo(700,100)
        ctx.fillText('150',70,110)
        ctx.moveTo(100,160)
        ctx.lineTo(700,160)
        ctx.fillText('120',70,170)
        ctx.moveTo(100,220)
        ctx.lineTo(700,220)
        ctx.fillText('90',70,230)
        ctx.moveTo(100,280)
        ctx.lineTo(700,280)
        ctx.fillText('60',70,290)
        ctx.moveTo(100,340)
        ctx.lineTo(700,340)
        ctx.fillText('30',70,350)
        ctx.fillText('0',70,400)
        ctx.stroke()

        // 绘制水平轴底部的线段
        ctx.moveTo(250,400)
        ctx.lineTo(250,410)
        // 绘制底部文字
        ctx.fillText('食品',170,415)
        ctx.moveTo(400,400)
        ctx.lineTo(400,410)
        ctx.fillText('数码',310,415)
        ctx.moveTo(550,400)
        ctx.lineTo(550,410)
        ctx.fillText('服饰',450,415)
        ctx.fillText('箱包',600,415)
        ctx.stroke()

        // 绘制矩形
        ctx.fillStyle = 'red'
        ctx.fillRect(120,200,120,200) // X Y W H   xy 相对于 左上角而言

     </script> 
  </body>
</html>
